@charset "utf-8";

.x-toast {
	position: fixed;
	left: 0;
	top: 0;
	display: -webkit-box;
	-webkit-box-pack: center;
	-webkit-box-align: center;
	width: 100%;
	height: 100%;
	z-index: 99997;
	background: rgba(0,0,0,0);
	pointer-events: none;
	&__inner {
		background: rgba(0,0,0,0.7);
		padding: 0.10rem 0.16rem;
		border-radius: 0.1rem;
		opacity: 0;
		transform-origin: 50%;
		p {
			color: #fff;
			font-size: 0.28rem;
		}
	}
	&--show {
		.x-toast__inner {
			transform: scale(1,1);
			opacity: 1;
			-webkit-animation: "___x_toast_show" 0.2s ease-out;
			animation: "___x_toast_show" 0.2s ease-out;
		}
		@at-root {
			@-webkit-keyframes "___x_toast_show" {
				0% { transform: scale(1.4,1.4); opacity: 0;}
				75% { transform: scale(0.95,0.95); opacity: 1;}
				100% { transform: scale(1,1); opacity: 1;}
			}
		}
	}
	&--hide {
		opacity: 0;
		transition: opacity 0.15s ease-out;
		.x-toast__inner {
			transform: scale(0.95,0.95);
			transition: all 0.15s ease-out;
		}
	}
}